<template>
  <div class="app-container">
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column prop="id" label="序号" width="180"> </el-table-column>
      <el-table-column prop="title" label="操作名称" width="180"></el-table-column>
      <el-table-column label="操作类型">
        <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.businessType === 'OTHER'">其他</el-tag>
            <el-tag type="primary" v-if="scope.row.businessType === 'INSERT'">新增</el-tag>
            <el-tag type="primary" v-if="scope.row.businessType === 'UPDATE'">更新</el-tag>
            <el-tag type="primary" v-if="scope.row.businessType === 'DELETE'">删除</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="success">成功</el-tag>
            <el-tag v-if="scope.row.status === 0" type="danger">失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作方法" prop="method"></el-table-column>
      <el-table-column label="操作用户" prop="operName"></el-table-column>
      <el-table-column label="IP地址" prop="operIp"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5,10,15,20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import * as api from "@/api/system/log/operLog";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 0
    };
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
        api.selectPage(this.currentPage,this.pageSize).then(response=>{
            this.tableData = response.data.records
            this.total = response.data.total
        }).catch(response=>{

        })
    },
    handleSizeChange(val){
        this.pageSize = val
        this.fetchData()
    },
    handleCurrentChange(val){
        this.currentPage = val
        this.fetchData()
    }    
  },
};
</script>
